Chrome trims the last <li> element in a row [closed]
Posted
by
Paul
on Pro Webmasters
See other posts from Pro Webmasters
or by Paul
Published on 2011-01-28T15:53:31Z
Indexed on
2011/01/28
23:39 UTC
Read the original article
Hit count: 280
Ok guys, I give up. Here's the code I'm struggling with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Blah</title>
<style type="text/css">
#container {
margin: 0 auto;
width: 350px;
border: 1px solid #ccc;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline;
padding: 5px;
margin: 0 1px;
background-color: lime;
line-height: 2em;
/* border: 1px solid red; */
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>Element A</li>
<li>Element B</li>
<li>Element C</li>
<li>Element D</li>
<li>Element E</li>
<li>Element F</li>
</ul>
</div>
</body>
</html>
Why the heck does Chrome trim the right side of "Element D" (even though there is enough space to display whole item), while Firefox and even Internet Explorer render this code properly? It becomes more visible when we apply the commented border.
In other words, is there a way to tell the browser that I want every single <li> element to be autonomic, and thus to move it to the next row if it doesn't fit entirely in the previous one?
Can't wait to see the solution, thanks in advance.
© Pro Webmasters or respective owner
